<template>
  <div ref="echart" class="box" id="dom"></div>
</template>

<script>
import {fetchGet} from "../axios/index"
import {EleResize} from "../echartOption/esresize"
export default {
  name: "MyEchart",
  data() {
    return {};
  },
  mounted() {
    this.MyEchartEncapsulation();
    this.getData();
  },
  props: ["option","path"],

  methods: {
    getData(){
      if(this.path){ 
        let data=fetchGet(this.path)
         console.log(data); 
      }
    },
    MyEchartEncapsulation() {
      const myEchart = this.$echarts.init(this.$refs.echart);
      const dom=document.getElementById('dom');
      myEchart.setOption(this.option);
      let listener=function(){
        myEchart.resize()
      }
      EleResize.on(dom,listener)
    },
  },
};
</script>

<style lang="less" scoped>
// .dom{
//   width: 100%;
//   height: 100%;
// }
.box {
  width: 100%;
  height: 100%;
}
</style>
